<template>
  <div class="add-node-btn-box">
    <div class="add-node-btn">
      <el-popover v-model="visible" placement="right-start">
        <div class="add-node-popover-body">
          <a class="add-node-popover-item approver" @click="addType(1)">
            <div class="item-wrapper">
              <span class="el-icon-s-check" />
            </div>
            <p>审批人</p>
          </a>
          <a class="add-node-popover-item notifier" @click="addType(2)">
            <div class="item-wrapper">
              <span class="el-icon-s-promotion" />
            </div>
            <p>抄送人</p>
          </a>
          <a class="add-node-popover-item condition" @click="addType(4)">
            <div class="item-wrapper">
              <span class="iconfont  icon-zuzhijiagou1" />
            </div>
            <p>条件分支</p>
          </a>
        </div>
        <button slot="reference" class="btn" type="button">
          <i class="el-icon-plus  white a-icon" />
        </button>
      </el-popover>
    </div>
  </div>
</template>
<script>
import { guidN } from '@/utils/index'
export default {
  props: ['childNodeP'],
  data() {
    return {
      visible: false
    }
  },
  methods: {
    addType(type) {
      this.visible = false
      if (type !== 4) {
        var data
        if (type === 1) {
          data = {
            'pkid': guidN(),
            'nodeName': '',
            'error': true,
            'type': 1,
            'settype': 1,
            'selectMode': 0,
            'selectRange': 0,
            'directorLevel': 1,
            'replaceByUp': 0,
            'examineMode': 1,
            'noHanderAction': 1,
            'examineEndDirectorLevel': 0,
            'childNode': this.childNodeP,
            'nodeUserList': [],
            'conditionModel': 0,
            'selectProject': '',
            'selectBill': ''

          }
        } else if (type === 2) {
          data = {
            'pkid': guidN(),
            'nodeName': '抄送人',
            'type': 2,
            'ccSelfSelectFlag': 1,
            'childNode': this.childNodeP,
            'nodeUserList': []
          }
        }
        this.$emit('update:childNodeP', data)
      } else {
        this.$emit('update:childNodeP', {
          'pkid': guidN(),
          'nodeName': '路由',
          'type': 4,
          'childNode': this.childNodeP,
          'conditionNodes': [{
            'pkid': guidN(),
            'nodeName': '条件1',
            'error': true,
            'type': 3,
            'priorityLevel': 1,
            'conditionModel': 1,
            'conditionList': [],
            'nodeUserList': [],
            'childNode': null
          }, {
            'pkid': guidN(),
            'nodeName': '条件2',
            'type': 3,
            'priorityLevel': 2,
            'conditionModel': 2,
            'conditionList': [],
            'nodeUserList': [],
            'childNode': null
          }]
        })
      }
    }
  }
}

</script>
<style lang="scss" scoped>
.item-wrapper [class*="el-icon-"]{
    font-size: 50px;
    margin: 10px;
}
.a-icon{
    font-size: 20px;
    text-align: center;
    margin-left: -3px;
    margin-top: -2px;
}
[class*="el-icon-"]:hover{
    color:#fff;
}
.btn{

      padding: 0 6px;
}
</style>

